<script setup>
	import {
		ref
	} from "vue"

	const member = ref(1)
	
	const list =[
		{
			url:'../../static/index.png'
		},
		{
			url:'../../static/index.png'
		},
		{
			url:'../../static/index.png'
		},
		{
			url:'../../static/index.png'
		},
	]
</script>
<template>
	<view class="my-now">
		<view class="mybtn" v-if="member === 0">
			<image class="images" src="../../static/activateds.png" alt="Description"></image>
			<view class="pers">
				<view class="period">
					会员有效期
				</view>
				<view class="activateds">
					未开通
				</view>
			</view>
		</view>
		<view class="mybtn" v-else>
			<image class="images" src="../../static/mybtn.png" alt="Description"></image>
			<view class="pers" >
				<view class="period" :class="{ active: member === 1 }" >
					会员有效期
				</view>
				<view class="activateds" :class="{ active: member === 1 }">
					2024年8月20日会员到期
				</view>
			</view>
			<view class="historys">
				<view class="">
					历史记录
				</view>
				<view class="hister">
					<view class="time">
						7.23
					</view>
					<view class="historical" >
						<view class="pictures" v-for="(item,index) in list" :key="index">
							<image :src="item.url" alt="Description"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>



<style scoped lang="scss">
	.time {
		width: 57rpx;
		height: 28rpx;
		font-size: 28rpx;
		color: #3D3D3D;
		line-height: 28rpx;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
	.historys {
		margin-top: 60rpx;
		font-size: 32rpx;
		color: #3D3D3D;
		font-weight: 600;
		.historical {
			display: flex;
			flex-wrap: wrap;
			.pictures {
				width: 210rpx;
				height: 294rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 6rpx solid #FFFFFF;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.pers {
		position: absolute;
		top: 40rpx;
		left: 40rpx;

	}

	.active {
		color: #000 !important;
	}

	.my-now {
		width: 100%;
		height: 100%;
		padding: 43rpx 30rpx 0 50rpx;



		.period {
			width: 160rpx;
			height: 32rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
			line-height: 32rpx;
			margin-bottom: 32rpx;
		}

		.activateds {
			// width: 150rpx;
			height: 50rpx;
			font-weight: 600;
			font-size: 50rpx;
			color: #999999;
			line-height: 50rpx;


		}

		.mybtn {
			position: relative;
			width: 670rpx;
			height: 320rpx;
			// background-color: aqua;
			font-family: HarmonyOS Sans, HarmonyOS Sans;

			.images {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>